import type {ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {message, Switch} from "antd";
import {PageContainer} from "@ant-design/pro-layout";
import {ModalForm, ProFormRadio, ProFormText} from "@ant-design/pro-form";
import {Authority} from "@/services/ant-design-pro/management";
import {useEffect, useState} from "react";
import {delivery} from "@/services/ant-design-pro/management";
// 定义嵌套表格
const expandedRowRender = () => {
  const data = [];
  data.push({
    key: 134,
    btn: '首页统计数据',
    url_a: '[GET] home/header',
    upgradeNum: 'Upgraded: 56',
  },);
  return (
    <ProTable
      columns={
        [
        {width: '105px', dataIndex: 'key', align: "center", key: 'key'},
        {width: '330px', dataIndex: 'btn', align: "center", key: 'btn'},
        {width: '860px', dataIndex: 'url_a', key: 'url_a'},
        {width: '260px', dataIndex: 'upgradeNum', align: "center", key: 'upgradeNum', render: () => (<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>),},
        {width: '180px', align: "center", dataIndex: 'operation', key: 'operation', valueType: 'option', render: () => [<a key="Pause">编辑</a>, <a key="Stop">删除</a>],},
      ]
      }
      showHeader={false}
      search={false}
      options={false}
      dataSource={data}
      pagination={false}
    />
  );
};

const data = [
  {
    key: '1',
    index: '1',
    btn_name: '主页',
    url: 'admin-index-index',
    web_url: 'admin-api-id{11}',
    url_ye: '/admin/home',
    labels: '1'
  },
]
const columns = [
  {
    title: 'ID',
    dataIndex: 'key',
    search:false,
    align: "center",
    width: 48,
  },
  {
    title: '按钮名称',
    dataIndex: 'btn_name',
    align: "center",
  },
  {
    title: '接口路径',
    dataIndex: 'url',
    align: "center",
    search: false,
    valueType: 'select',
  },
  {
    title: '前端权限',
    dataIndex: 'web_url',
    align: "center",
    search: false,
    valueType: 'select',
  },
  {
    title: '页面路由',
    dataIndex: 'url_ye',
    align: "center",
    search: false,
    valueType: 'select',
  },
  {
    title: '规则状态',
    align: "center",
    dataIndex: 'labels',
    render: () => (
      <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
    ),
    valueEnum: {
      closed: {
        text: '显示',
        status: 'Success',
      },
      processing: {
        text: '不显示',
        status: 'Processing',
      },
    },

  },
  {
    title: '操作',
    align: "center",
    valueType: 'option',
    render: () => [
      <a>
        <ModalForm<{
          name: string;
          company: string;
        }>
          trigger={<a>编辑</a>}
          modalProps={ {
            onCancel: () => console.log('run'),
          } }
        >
          <ProFormText
            name="text"
            label="身份名称："
            placeholder="请输入身份名称"
          />
          <ProFormRadio.Group
            name="Radio"
            label="是否开启:"
            options={[
              {
                label: '开启',
                value: 'a',
              },
              {
                label: '关闭',
                value: 'b',
              },
            ]}
          />
          <div>权限：
            暂无数据
          </div>
        </ModalForm>
      </a>,
      <a>
        <ModalForm<{
          name: string;
          company: string;
        }>
          width='350px'
          title="删除"
          trigger={<a>删除</a>}
          modalProps={ {
            onCancel: () => console.log('run'),
          } }
        >
          <div>确定要删除吗？删除后将无法恢复，请谨慎操作！</div>
        </ModalForm>
      </a>,
    ],
  },
];
export default () => {
  const [dataAll, setData] = useState([]);
  useEffect(() => {
    Authority().then(res => {
      console.log(res);
      setData(res.data);
    })
  }, [])
  return (
    <PageContainer
      header={ {
        title: '权限管理',
        breadcrumb: {},
      } }
    >
      <ProTable

        columns={columns}
        editable={ {
          type: 'multiple',
        } }
        dataSource={data}
        expandable={{expandedRowRender}}
        rowKey="id"
        search={ {
          labelWidth: 'auto',
        } }
        pagination={ {
          pageSize: 5,
        } }
        dateFormatter="string"
        headerTitle="权限管理"
      />
    </PageContainer>
  );
};
